<template>
  <div class="list-container" id="list-container">
    <Card :style="{ height: '100%' }" dis-hover :bordered="false">
      <Row type="flex">
        <!--查询表单-->
        <Col span="24" ref="form">
          <slot name="form"></slot>
        </Col>
        <!--工具栏目-->
        <Col span="24" ref="tools">
          <slot name="tools"></slot>
        </Col>
        <!--表格列表-->
        <Col span="24" ref="tables">
          <slot name="table" :height="height"> </slot>
        </Col>
        <!---分页-->
        <Col span="24" ref="pages" class="pages">
          <slot name="pages"></slot>
        </Col>
      </Row>
    </Card>
    <slot></slot>
  </div>
</template>
<script>
import { Debounce } from "../../utils/common.js";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "list-container",
  data() {
    return {
      height: 0
    };
  },
  activated() {
    if (this.getRefresh) {
      this.$emit("on-refresh");
      this.setRefreshStatus(false);
    }
    const func = Debounce(() => {
      let navHeadHeight =
        document.getElementById("yui-header") !== null
          ? document.getElementById("yui-header").offsetHeight
          : 0;
      let tabsheight =
        document.getElementById("yui-tabs") !== null
          ? document.getElementById("yui-tabs").offsetHeight
          : 0;
      this.$nextTick(() => {
        let formHeight = this.$refs.form.$el.offsetHeight;
        let toolsHeight = this.$refs.tools.$el.offsetHeight;
        let pagesHeight = this.$refs.pages.$el.offsetHeight;
        let tableHeight =
          window.innerHeight -
          (navHeadHeight + tabsheight) -
          20 -
          52 -
          formHeight -
          toolsHeight -
          pagesHeight;
        this.height = tableHeight;
      });
    });
    window.onresize = () => {
      func();
    };
    func();
  },
  mounted() {},
  computed: {
    ...mapGetters({
      getRefresh: "tagsView/getRefresh"
    })
  },
  methods: {
    ...mapActions({
      setRefreshStatus: "tagsView/setRefreshStatus"
    })
  }
};
</script>
<style lang="scss" scoped>
.list-container {
  padding: 0 12px 12px;
  height: 100%;
  .pages {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
